<template>
  <div class="pageX" ref="fatherDom" :style="{
    '--width': pageW, // 分页组件宽度
    '--overflow': setCss.overflow, // 分页组件
  }">
    <div class="pageBox" v-if="props.which==='one'">
      <el-pagination ref="pagDom" background :currentPage="props.modelValue[props.option.pageNum]"
                     :page-size="props.modelValue[props.option.pageSize]" :disabled="setStyle.disabled"
                     :size="setStyle.size" :background="setStyle.background"
                     :page-sizes="setStyle.pageList" :layout="setStyle.layout"
                     @prev-click="upper" @next-click="next" :pager-count="setStyle.count"
                     :total="Number.parseFloat(props.total)" @size-change="changeSize"
                     @current-change="changeNum" :prev-text="setStyle.upText"
                     :next-text="setStyle.nextText"/>
    </div>
  </div>
</template>

<script setup>
import {computed, nextTick, onMounted, onUnmounted, ref} from 'vue'
import { ElPagination } from 'element-plus'

const emit = defineEmits(['update:modelValue', 'changeSize', 'changeNum', 'upNext', 'change'])
const props = defineProps({
  which: {
    type: String,
    default: 'one'
  },
  option: {
    type: Object,
    default: {
      pageNum: 'pageNum',
      pageSize: 'pageSize'
    }
   },
  // 双向绑定
  modelValue: {
    type: Object,
    default: {
      pageNum: 1,  // 第几页
      pageSize: 20  // 一页数量
    }
  },

  // 总数
  total: {
    type: [String, Number],
    default: 0
  },

  // 按钮显示样式
  pagStyle: {
    type: Object,
    default: {
      size: 'default',
      background: true,
      pageList: [20, 50, 70, 100],  // 一页数量选择框
      layout: undefined, // 分页子组件布局，默认为：'-> ,total, sizes, prev, pager, next, jumper'
      count: 5, // 页码按钮数量。5 ≤ x ≤ 21 的奇数。String/Number类型
      upText: undefined, // 用来替换上一页的文本
      nextText: undefined, // 用来替换下一页的文本
    }
  },

  // 分页组件的宽度
  width: {
    type: [String, Number],
    default: 'auto'
  },
  // 动态修改组件宽度
  onWidth: {
    type: [String, Number],
    default: -1
  },

  // cssStyle样式
  cssStyle: {
    type: Object,
    default: {
      overflow: undefined, // 分页组件溢出。默认为：hidden
    }
  }
})

// 双向绑定事件
const toModel = (pageNum, pageSize) => {
  // 保留参数的其他字段原有值
  let result = props.modelValue
  result[props.option.pageNum] = pageNum
  result[props.option.pageSize] = pageSize
  emit('update:modelValue', result)
}

// 改变了一页显示的数量
const changeSize = size => {
  toModel(props.modelValue[props.option.pageNum], size)
  emit('changeSize', size)
  setTimeout(() => {
    emit('change')
  },100)
}
// 改变了第几页
const changeNum = num => {
  toModel(num, props.modelValue[props.option.pageSize])
  emit('changeNum', num)
  setTimeout(() => {
    emit('change')
  },100)
}
// 点击了上一页,num是变化前的页码。也会触发页码改变：changeNum
const upper = num => {
  toModel(num - 1, props.modelValue[props.option.pageSize])
  emit('upNext', {
    type: 'up',
    value: num - 1
  })
}
// 点击了下一页，num是变化前的页码。也会触发页码改变：changeNum
const next = num => {
  toModel(num + 1, props.modelValue[props.option.pageSize])
  emit('upNext', {
    type: 'next',
    value: num + 1
  })
}


// 按钮组件样式设置
const setStyle = computed(() => {
  let result = {}
  result.size = props.pagStyle.size != undefined ? props.pagStyle.size : 'small'
  result.background = props.pagStyle.background != undefined ? Boolean(props.pagStyle.background) : true
  result.disabled = props.pagStyle.disabled != undefined ? Boolean(props.pagStyle.disabled) : false
  result.pageList = props.pagStyle.pageList != undefined ? props.pagStyle.pageList : [20, 50, 70, 100]
  result.layout = props.pagStyle.layout != undefined ? props.pagStyle.layout : 'total, sizes, prev, pager, next, jumper'
  result.count = props.pagStyle.count != undefined ? Number.parseInt(props.pagStyle.count) : 5
  if (result.count >= 21) {
    result.count = 21
  } else if (result.count <= 5) {
    result.count = 5
  } else {
    // 如果是偶数则减一
    result.count = result.count % 2 == 0 ? result.count - 1 : result.count
  }


  result.upText = props.pagStyle.upText
  result.nextText = props.pagStyle.nextText

  return result
})

// css样式设置
const setCss = computed(() => {
  let result = {}
  result.overflow = props.cssStyle.overflow != undefined ? props.cssStyle.overflow : 'hidden'
  return result
})

// 撑大宽度
const fatherDom = ref(null)
const pagDom = ref(null)
const pageW = ref('0px')
const setW = () => {
  if (props.width != 'auto') {
    pageW.value = props.width != undefined ? String(Number.parseFloat(props.width)) + 'px' : 'auto'
  } else {
    pageW.value = 'auto'
  }
}
// 如果为自动时，动态撑大宽度为父组件的宽度
const calueW = () => {
  if (pagDom.value) {
    const width = window.innerWidth - pagDom.value.$el.offsetLeft - props.onWidth
    // console.log(pagDom.value.$el.offsetLeft)
    pageW.value = String(width) + 'px'
  }

}

onMounted(() => {
  setW()
  if (props.onWidth != -1 && props.onWidth != '-1') {
    // 动态撑大宽度
    nextTick(() => {
      calueW()
      window.addEventListener('resize', calueW)
    })
  }
})

onUnmounted(() => {
  window.removeEventListener('resize', calueW)
})

</script>

<style scoped lang='scss'>
.pageX {

}
.pageBox {
  width: var(--width);

  :deep(*).el-pagination {
    //background-color: greenyellow;
    overflow: var(--overflow);
    // 总数
    .el-pagination__total {
      flex: 0 0 auto;
    }

    // 页数
    .el-pagination__sizes {
      flex: 0 0 auto;
    }

    // 上一页
    .btn-prev {
      flex: 0 0 auto;
    }

    // 页码
    .el-pager {
      flex: 0 0 auto;

      li {
      }
    }

    // 下一页
    .btn-next {
      flex: 0 0 auto;
    }

    // 跳转
    .el-pagination__jump {
      flex: 0 0 auto;
    }
  }
}
</style>